<template>
  <div>
    <el-form
      ref="form"
      v-loading="loading"
      :model="form"
      element-loading-text="保存中"
      :rules="rules"
      label-width="120px"
      label-suffix="："
      size="small"
    >
      <app-main-sub-title title="店铺设施" />
      <el-form-item
        v-for="(item,index) in form.supplyFacility"
        :key="'supplyFacility'+index"
        :label="item.label"
      >
        <el-checkbox-group v-if="item.label!=='其它设施'" v-model="item.checkList">
          <el-checkbox v-for="(v,i) in item.groupList" :key="i" :label="v" />
        </el-checkbox-group>
        <div v-else>
          <div>
            <el-tag
              v-for="(v,i) in item.checkList"
              :key="i"
              closable
              @close="del(item.checkList,i)"
            >{{ v }}</el-tag>
          </div>
          <el-input
            v-model.trim="supplyServiceInput"
            type="text"
            style="width:300px"
            maxlength="30"
            placeholder="请输入内容按Enter键添加"
            @keyup.enter.native="addCustom('service',item)"
          />
        </div>
      </el-form-item>

      <app-main-sub-title title="店铺服务" />
      <el-form-item
        v-for="(item,index) in form.supplyService"
        :key="'supplyService'+index"
        :label="item.label"
      >
        <el-checkbox-group v-if="item.label!=='其它服务'" v-model="item.checkList">
          <el-checkbox v-for="(v,i) in item.groupList" :key="i" :label="v" />
        </el-checkbox-group>
        <div v-else>
          <div>
            <el-tag
              v-for="(v,i) in item.checkList"
              :key="i"
              closable
              @close="del(item.checkList,i)"
            >{{ v }}</el-tag>
          </div>
          <el-input
            v-model="supplyFacilityInput"
            type="text"
            style="width:300px"
            maxlength="30"
            placeholder="请输入内容按Enter键添加"
            @keyup.enter.native="addCustom('facility',item)"
          />
        </div>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" round size="small" @click="submit">保 存</el-button>
        <el-button round size="small" @click="initData">重 置</el-button>
        <el-button round size="small" @click="clearForm">清 空</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { saveShopManageOtherConfig } from '../../../api/shop'
import FacilityAndServiceOptions from './FacilityAndServiceOptions.js'
export default {
  props: {
    configForm: {
      type: Object,
      require: true
    },
    tabName: {
      type: String,
      require: true
    }
  },
  data() {
    return {
      /**
         * 表单校验字段相关
         */
      rules: {},
      // 配置

      // 状态
      loading: false,
      // 数据
      supplyServiceInput: '',
      supplyFacilityInput: '',
      form: {
        supplyService: [],
        supplyFacility: []
      }
    }
  },
  watch: {
    tabName(val) {
      this.initData()
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    /**
       * 获取数据
       */
    // 设置表单初始数据
    initData() {
      this.form.supplyService = JSON.parse(
        JSON.stringify(FacilityAndServiceOptions.supplyService)
      )
      this.form.supplyFacility = JSON.parse(
        JSON.stringify(FacilityAndServiceOptions.supplyFacility)
      )
      const configForm = Object.assign({}, this.configForm)
      this.form.supplyService.forEach((item, index) => {
        configForm.supplyService.forEach((v, i) => {
          if (item.label === v.label) {
            item.checkList = v.checkList
          }
        })
      })
      this.form.supplyFacility.forEach((item, index) => {
        configForm.supplyFacility.forEach((v, i) => {
          if (item.label === v.label) {
            item.checkList = v.checkList
          }
        })
      })
    },

    /**
       * 按钮组
       *
       */
    // 保存
    submit() {
      const data = Object.assign({}, this.form)
      const params = {}
      params.shopId = this.configForm.shopId
      params.supplyService = JSON.stringify(data.supplyService)
      params.supplyFacility = JSON.stringify(data.supplyFacility)
      this.loading = true
      saveShopManageOtherConfig(params)
        .then(res => {
          this.$notify({
            title: '成功',
            message: '保存成功',
            type: 'success',
            duration: 2000,
            offset: 40
          })
          this.configForm.supplyService = data.supplyService
          this.configForm.supplyFacility = data.supplyFacility
        })
        .catch(err => {})
        .finally(() => {
          this.loading = false
        })
    },

    // 新增自定义
    addCustom(type, item) {
      if (type === 'service' && this.supplyServiceInput) {
        item.checkList.push(this.supplyServiceInput)
        item.checkList = [...new Set(item.checkList)]
        this.supplyServiceInput = ''
      } else if (this.supplyFacilityInput) {
        item.checkList.push(this.supplyFacilityInput)
        item.checkList = [...new Set(item.checkList)]
        this.supplyFacilityInput = ''
      }
    },

    // 删除
    del(item, index) {
      console.log(item, index)
      item.splice(index, 1)
    },

    // 清空数据
    clearForm() {
      this.form.supplyService = JSON.parse(
        JSON.stringify(FacilityAndServiceOptions.supplyService)
      )
      this.form.supplyFacility = JSON.parse(
        JSON.stringify(FacilityAndServiceOptions.supplyFacility)
      )
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .el-checkbox + .el-checkbox {
    margin-left: 0;
  }
  .el-checkbox {
    margin-right: 20px;
    line-height: 32px;
  }
  .el-tag {
    margin-right: 10px;
  }
  .el-tag {
    margin-bottom: 10px;
  }
</style>
